<template>
  <div class="container">
    <el-table border :header-cell-style="{background: '#eef1f6', color:'#606266'}"
    :data="tableData.filter(data => !search || data.drgName.toLowerCase().includes(search.toLowerCase()) || data.drgCode.toLowerCase().includes(search.toLowerCase()))"
    @cell-click="cellClick"
    style="width: 100%" size="small">
        <el-table-column
        label="DRG编码"
        prop="drgCode">
        </el-table-column>
        <el-table-column
        label="DRG名称"
        prop="drgName">
        </el-table-column>
        <el-table-column
        label="权重"
        prop="drgRate">
          <template slot-scope="scope">
              <el-input v-model="scope.row.drgRate" v-if="scope.row.drgRate_ediable" @blur="lostFocus(scope.$index, scope.row)"></el-input>
              <span style="margin-left: 10px" v-else>{{scope.row.drgRate}}</span>
          </template>
        </el-table-column>
        <el-table-column
        label="费率" prop="drgStandardCost">
          <template slot-scope="scope">
              <el-input v-model="scope.row.drgStandardCost" v-if="scope.row.drgStandardCost_ediable" @blur="lostFocus(scope.$index, scope.row)"></el-input>
              <span style="margin-left: 10px" v-else>{{scope.row.drgStandardCost}}</span>
          </template>
        </el-table-column>
        <el-table-column
        align="left">
        <template slot="header" slot-scope="{}">
            <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
            <el-button type="primary" size="small"
            @click="handleEdit(scope.$index, scope.row)">保存</el-button>
        </template>
        </el-table-column>
    </el-table>
  </div>
</template>

<style lang="scss">
.container {
    margin: 10px;
}
</style>

<script>
import { getMdcDrgList, updateMdcDrg } from '../../api/pt-visit'

export default {
  data () {
    return {
      tableData: [],
      search: ''
    }
  },
  methods: {
    handleEdit (index, row) {
      row.drgStandardCost_ediable = false
      row.drgRate_ediable = false
      updateMdcDrg(row).then(res => {
        console.log(res)
      })
    },
    cellClick (row, column) {
      if (column.property === 'drgStandardCost') {
        row.drgStandardCost_ediable = true
        row.drgRate_ediable = false
      } else if (column.property === 'drgRate') {
        row.drgStandardCost_ediable = false
        row.drgRate_ediable = true
      }
    },
    lostFocus (index, row) {
      row.drgStandardCost_ediable = false
      row.drgRate_ediable = false
    }
  },
  mounted () {
    const that = this
    getMdcDrgList().then(res => {
      res.forEach(element => {
        element.drgRate_ediable = false
        element.drgStandardCost_ediable = false
      })
      that.tableData = res
    })
  }
}
</script>
